import { useState } from "react"
import { connect, ConnectedProps } from "react-redux"
import { searchAction } from "../../redux/actions/search"

const connector = connect(null, {
  dispatchSearch: searchAction,
})

// 定义类型
type Props = ConnectedProps<typeof connector>


function SearchHeader({ dispatchSearch }: Props) {
  const [searchName, setSearchName] = useState("")

  const search = () => {
    // 分发异步action
    dispatchSearch(searchName)
  }

  return (
    <section className="jumbotron">
      <h3 className="jumbotron-heading">Search Github Users</h3>
      <div>
        <input value={searchName} onChange={(e) => setSearchName(e.target.value)} type="text" placeholder="enter the name you search" />
        <button onClick={search}>Search</button>
      </div>
    </section>
  )
}

export default connector(SearchHeader)
